//
// WIDTH/HEIGHT
// ============
//


// Default variables
$no-mq ?= false
$width--fixed-min ?= 960px
$width--fixed-max ?= 1200px


//
// WIDTH BASED
//

width-min($width)
  +_media('width', 'min', $width)
    {block}

width-max($width)
  +_media('width', 'max', $width)
    {block}

width-range($min-width, $max-width)
  +_media('width', 'range', $min-width, $max-width)
    {block}


//
// HEIGHT BASED
//

height-min($height)
  +_media('height', 'min', $height)
    {block}

height-max($height)
  +_media('height', 'max', $height)
    {block}

height-range($min-height, $max-height)
  +_media('height', 'range', $min-height, $max-height)
    {block}


//
// MEDIA QUERY BUILDER
//

_media($direction, $type, $a, $b = false)

  if ($no-mq == true)
    +_no-media($direction, $type, $a, $b)
      {block}

  else
    $mq = ''
    if ($type == 'min' || $type == 'max')
      $mq = 'screen and (' + $type + '-' + $direction + ': ' + $a + ')'
    if ($type == 'range')
      $mq = 'screen and (min-' + $direction + ': ' + $a + ') and (max-' + $direction + ': ' + $b + ')'

    @media $mq
      {block}


//
// NO-MEDIA QUERY BUILDER
//

_no-media($direction, $type, $a, $b)
  if ($direction == 'width')
    if ($type == 'min')
      if ($width--fixed-min >= $a)
        {block}
    else if ($type == 'max')
      if ($width--fixed-max <= $a)
        {block}
    else if ($type == 'range')
      if ($width--fixed-min >= $a && $width--fixed-max <= $b)
        {block}
